import React, { Component } from 'react';
import { Scroller, Touchable } from '$yo-component';
import Header from '$component/header/index.js';
import Footer from '$component/footer/index.js';
import yoHistory from '$common/history';
import './index.scss';
import SkillDates from '../../common/mock/skill.json';

class Skill extends Component {
    constructor(props) {
        super(props);
        this.state = { expandId : -1};
    }

    clickHandler(menuDataId){
        this.setState({ expandId: menuDataId});
    }
   
    render() {
        var style={color: 'rgb(170, 170, 170)'}
        var crtCmp = this;
   
      var menusDataDom = SkillDates.map(function(item){
        var liData = null;
        if(item.children){
            liData = item.children.map(function(childrenItem){
                return (
                
                        <div key={childrenItem.id} className={item.id==crtCmp.state.expandId?"item":"hidden"}>
                            <i className="yo-ico"></i>
                        <div className="flex"> {childrenItem.label}</div>
                            
                        </div>
                )
            })
        }


          {/* //将完整Virtual DOM返回 */}
          return (
                <div key={item.id}  className="yo-list yo-list-group">
                    <h3 onClick={crtCmp.clickHandler.bind(crtCmp,item.id)} className="label">{item.label}</h3> 
                    {liData?liData:""} 
                </div>
            );

      })

      return (
        <div className="yo-flex">
            <Header title="技能" left={false}/>
            <Scroller extraClass="flex">
                <div className="m-content">
                    {menusDataDom}
                </div>
            </Scroller>
            <Footer left={false}/>
        </div>
      )
    }

}

export default Skill;
